 <!-- 主页面 -->
<template>
  <div id="home">
    <!-- ----------------头部导航栏 -->
    <div class="home-header">
      <div class="home-header-box">
        <img class="header-logo" src="../image/QQ图片20220227003356.png" alt />
        <div class="header-tab2" v-if="!userinfo">
          <router-link class="tabbar find-job" :to="{ path: '/user' }"
            >我要找工作</router-link
          >
          <router-link class="tabbar join-us" :to="{ path: '/company' }"
            >我要招聘</router-link
          >
        </div>
        <!-- 上传简历 -->
        <div class="header-tab3">
          <div class="tabbar upload-resume" @click="uploadresume()">
            添加个人简历
          </div>
        </div>
        <el-dialog
          :visible.sync="dialogVisible1"
          width="50%"
          :before-close="handleClose"
        >
          <add-resume></add-resume>
        </el-dialog>
        <!-- 去登陆注册 -->
        <div class="go-button">
          <el-button
            class="register-go go-item"
            @click="gotoCompany()"
            v-if="!userinfo"
            >企业</el-button
          >
          <el-button
            class="login-go go-item"
            @click="gotoUser()"
            v-if="!userinfo"
            >用户</el-button
          >
          <el-button
            class="login-go go-item"
            @click="gotoAdmin()"
            v-if="!userinfo"
            >管理员</el-button
          >
          <el-dropdown trigger="click" v-if="userinfo">
            <span class="el-dropdown-link">
              当前用户：{{ username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-button
                class="exit"
                :plain="true"
                style="border: none"
                @click="exit()"
                >退出</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- ----------------内容部分 -->
    <div class="home-content">
      <div class="big-logo">
        <img class="logo-photo" src="../image/QQ图片20220227003327.png" alt />
      </div>
      <!-- 搜索 -->
      <div class="searchBtn">
        <el-input
          placeholder="搜索职位"
          v-model="search"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getjobList()"
          ></el-button>
        </el-input>
      </div>
      <!-- 热门职位 -->
      <div class="hot-jobs">
        热门职位：
        <span class="hot-job-item">配/理/拣/发货</span>
        <span class="hot-job-item">质量管理/测试</span>
        <span class="hot-job-item">剪辑师</span>
        <span class="hot-job-item">项目助理</span>
        <span class="hot-job-item">工程造价</span>
      </div>
      
      <div class="job-list">
        <el-divider class="job-title">推荐职位</el-divider>
        <!-- 职位列表 -->
        <div class="job-box">
          <div
            class="job-box-item"
            v-for="item in tuiList"
            :key="item.id"
            @click="jobDetail(item.id)"
          >
            <div class="job-left">
              <div class="job-box-item-top">
                <span class="job-name">{{ item.post }}</span>
                <span class="job-address"
                  >{{ item.workPlace }} | {{ item.workYear }} |
                  {{ item.education }}</span
                >
                <div class="company-type">{{ item.socialBenefits }}</div>
                <span class="job-pay">{{ item.pay }}+</span>
              </div>
              <div class="job-box-item-bottom">
                <div class="company-name">{{ item.jobRequirements }}</div>
                <div class="company-date">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="job-right">
                  
            </div>
          </div>
          <div class="null" v-show="this.list.length == 0">
            没有对应的招聘信息......
          </div>
        </div>
        <!-- 列表详情弹窗 -->
        <el-dialog
          :visible.sync="dialogVisible2"
          width="50%"
          @close="clearComp()"
          @open="openComp()"
        >
          <job-detail v-if="showComp" :jobId="id"></job-detail>
        </el-dialog>
      </div>
      
      <div class="job-list">
        <el-divider class="job-title">热招职位</el-divider>
        <!-- 职位列表 -->
        <div class="job-box">
          <div
            class="job-box-item"
            v-for="item in list"
            :key="item.id"
            @click="jobDetail(item.id)"
          >
            <div class="job-left">
              <div class="job-box-item-top">
                <span class="job-name">{{ item.post }}</span>
                <span class="job-address"
                  >{{ item.workPlace }} | {{ item.workYear }} |
                  {{ item.education }}</span
                >
                <div class="company-type">{{ item.socialBenefits }}</div>
                <span class="job-pay">{{ item.pay }}+</span>
              </div>
              <div class="job-box-item-bottom">
                <div class="company-name">{{ item.jobRequirements }}</div>
                <div class="company-date">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="job-right">
                  
            </div>
          </div>
          <div class="null" v-show="this.list.length == 0">
            抱歉，没有找到您想要的信息..
          </div>
          <el-pagination
            @current-change="getjobList"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next"
          ></el-pagination>
        </div>
        <!-- 列表详情弹窗 -->
        <el-dialog
          :visible.sync="dialogVisible2"
          width="50%"
          @close="clearComp()"
          @open="openComp()"
        >
          <job-detail v-if="showComp" :jobId="id"></job-detail>
        </el-dialog>
      </div>
    </div>
    <!-- ------------------底部 -->
    <div class="home-footer">
      <img src="../image/footer.png" />
    </div>
  </div>
</template>

<script>
import userModel from "../request/index";
import addResume from "../components/addResume";
import jobDetail from "../components/jobDetail";
import cookie from "js-cookie";
export default {
  //页面需要的数据
  data() {
    return {
      tuiList: [],
      userinfo: null,
      username: null,
      search: "", //职位搜索框的值
      dialogVisible1: false, //对话框开关
      dialogVisible2: false, //对话框开关
      showComp: true,
      list: [], //招聘信息列表
      currentPage: 1, //第几页
      pageSize: 5, //每页多少条
      total: null,
      id: "",
    };
  },

  //页面注册的组件
  components: {
    addResume,
    jobDetail,
  },
  //页面的事件和方法
  methods: {
    //跳转用户
    gotoUser() {
      this.$router.push({ path: "/user" });
    },
    //跳转企业
    gotoCompany() {
      this.$router.push({ path: "/company" });
    },
    //跳转管理员
    gotoAdmin() {
      this.$router.push({ path: "/admin" });
    },
    // 退出登录
    exit() {
      //删除用户信息
      window.localStorage.removeItem("userinfo");
      userModel.LoginOut({});
      cookie.remove("satoken");
      this.$router.push({ path: "/user" });
      this.$message.success("注销成功");
    },
    // 对话框关闭（新建）
    handleClose() {
      this.dialogVisible1 = false;
    },
    // 打开对话框（查询列表）
    clearComp() {
      this.dialogVisible2 = false;
      this.showComp = false;
    },
    // 关闭对话框（查询列表）
    openComp() {
      this.dialogVisible2 = true;
      this.showComp = true;
    },
    // 点击上传简历
    uploadresume() {
      this.dialogVisible1 = true;
      if (!this.userinfo) {
        this.$router.push({ path: "/user" });
      }
    },
    // 点击查看列表详情
    jobDetail(itemid) {
      this.dialogVisible2 = true;
      this.id = itemid;
    },

    //招聘信息列表
    getjobList(page = 1) {
      this.pageNo = page;
      userModel
        .getjobList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          post: this.search,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.list = result.records;
            this.total = result.total;
            console.log(this.list);
          }
        });
    },
    //推荐信息列表
    getTuiList() {
      userModel
        .getjobList({
          pageNo: 1,
          pageSize: 5,
          post: this.userinfo.typeName
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.tuiList = result.records;
            this.total = result.total;
            console.log(this.tuiList);
          }
        });
    },
  },
  //生命周期（页面加载时执行）
  created() {
    if (cookie.get("satoken") == null) {
      window.localStorage.removeItem("userInfo");
    } else {
      userModel.isLogin({}).then((res) => {
        if (!res.data.success) {
          window.localStorage.removeItem("userInfo");
        }
      });
    }
    // 取出用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (this.userinfo) {
      this.username = this.userinfo.name;
    }
    this.getjobList();
    this.getTuiList();
  },
};
</script>


<style lang="scss" scoped >
@import "../css/Home.scss";
</style>
